<template>
  <view class="wraps">
    <view class="toggle">
      <view class="score">
        <view class="pressure">
          <text class="name">{{ state.testScoreWrap.name }}</text>
          <text class="unit">{{ state.testScoreWrap.unit }}</text>
        </view>
        <view class="scoreId">
          <view>{{ state.testScoreWrap.currentSwiper }}</view>
        </view>
      </view>
      <Calipers
        :min="calipersData.min"
        :max="calipersData.max"
        :base="calipersData.base"
        :scale="calipersData.scale"
        :value="calipersData.values"
        :init="calipersData.init"
        @update:value="updateValue"
      ></Calipers>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
const props = defineProps({
  message: Object
})
const emit = defineEmits(['childEvent'])
const state = reactive({
  testScoreWrap: {
    currentSwiper: 0,
    name: '',
    unit: ''
  }
})
const calipersData = ref({
  min: 0,
  max: 120,
  base: 1,
  scale: 10,
  values: 0,
  init: 0
})
watch(
  () => props.message,
  (newValue, oldValue) => {
    calipersData.value.max = newValue.maxValue
    calipersData.value.values = newValue.currentScore
    calipersData.value.init = newValue.currentScore
    state.testScoreWrap.currentSwiper = newValue.currentScore
    state.testScoreWrap.name = newValue.name
    state.testScoreWrap.unit = newValue.unit
    if (newValue.name == '血糖') {
      calipersData.value.base = 0.1
      calipersData.value.scale = 1
    } else {
      calipersData.value.base = 1
      calipersData.value.scale = 10
    }
    if (newValue.name == '身高' || newValue.name == '体重') {
      calipersData.value.min = 20
    } else {
      calipersData.value.min = 0
    }
  },
  {
    immediate: true,
    deep: true
  }
)
watch(
  () => state.testScoreWrap,
  (newValue, oldValue) => {
    emit('childEvent', newValue)
  },
  {
    immediate: true,
    deep: true
  }
)
const updateValue = (e) => {
  state.testScoreWrap.currentSwiper = e
}
</script>

<style lang="scss" scoped>
.wraps {
  .toggle {
    padding: 8rpx 0rpx 0rpx;
    border-radius: 16rpx;
    border-right: 1px solid #fbfcfdc2;
  }
  .score {
    display: flex;
    justify-content: space-between;
    color: #bdbdbd;
    font-size: 24rpx;
    align-items: flex-end;
    font-weight: bold;
    position: relative;
    height: 70rpx;
    margin-top: 22rpx;
    padding: 0 20rpx;
    .scoreId {
      color: #00d1b6;
      font-size: 64rpx;
      position: absolute;
      text-align: center;
      width: 100%;
      bottom: 10rpx;
      left: 0;
    }
    .pressure {
      position: absolute;
      left: 30rpx;
      top: 0;
      .name {
        font-size: 30rpx;
        color: #222;
        font-weight: 700;
        display: inline-block;
        vertical-align: middle;
      }
      .unit {
        font-size: 30rpx;
        color: #666;
        display: inline-block;
        vertical-align: middle;
        font-weight: 400;
        margin-left: 15rpx;
      }
    }
  }
}
</style>
